<template>
  <div>
    <!-- 单选排序 -->
    <el-radio-group v-model="sortCol">
      <el-radio :label="1">价格排序</el-radio>
      <!-- <el-radio :label="6">备选项</el-radio>
      <el-radio :label="9">备选项</el-radio> -->
    </el-radio-group>
    <el-button
      type="primary"
      icon="el-icon-caret-bottom"
      @click="priceBtnUp()"
    ></el-button>
    <el-button
      type="primary"
      icon="el-icon-caret-top"
      @click="priceBtnDown()"
    ></el-button>
    <!-- 展示表格 -->
    <el-table
      :data="
        pageData.data.filter(
          (data) =>
            !search || data.name.toLowerCase().includes(search.toLowerCase())
        )
      "
      style="width: 100%"
    >
      <el-table-column label="服务名称" prop="name" resizable style="black">
      </el-table-column>
      <el-table-column
        label="服务内容"
        prop="content"
        align="center"
        width="450px"
        fit="true"
      >
      </el-table-column>
      <el-table-column label="服务价格" prop="price" align="center">
      </el-table-column>
      <el-table-column align="center">
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
          <!-- 新增服务按钮 -->
          <el-button
            class="el-icon-circle-plus-outline"
            type="warning"
            @click="handleAdd()"
            id="add"
            >新增服务</el-button
          >
        </template>
        <template slot-scope="scope">
          <div id="btn" align="left">
            <el-button size="" @click="handleEdit(scope.$index, scope.row)"
              >修改</el-button
            >
            <!-- 删除按钮 -->
            <el-button
              size=""
              type="danger"
              @click="open(scope.$index, scope.row)"
              >删除</el-button
            >
            <el-button
              size=""
              type="success"
              @click="handleDetail(scope.$index, scope.row)"
              >详情</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 修改及详情的弹出对话框 -->
    <!-- 修改详情 -->
    <el-dialog title="修改服务" :visible.sync="updateVisible" width="60%">
      <!-- 3.使用更新子组件 -->
      <Update
        :server="currentServer"
        v-if="refresh"
        @closedialog="updateData"
      ></Update>
    </el-dialog>

    <!-- 查看详情 -->
    <el-dialog title="详情" :visible.sync="dialogVisible" width="60%">
      <Detail :server="currentServer" v-if="refresh"></Detail>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 新增服务 -->
    <el-dialog title="新增服务" :visible.sync="addVisible" width="60%">
      <!-- 3.使用更新子组件 -->
      <Add
        :server="merchantsServer"
        v-if="refresh"
        @add_dialog="addServer"
      ></Add>
    </el-dialog>

    <!-- 分页内容 -->
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageData.currentPage"
      :page-sizes="[5, 10, 15]"
      :page-size="pageData.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageData.total"
    >
    </el-pagination>
  </div>
</template>

<script>
import Add from "./Add";
import axios from "../../../axios_config";
import Update from "./Update";
import Detail from "./Detail";
import http from "../../../axios_config";
import Commons from "../../../js/commons";
export default {
  components: {
    Add,
    Detail,
    Update,
    Detail,
  },
  data() {
    return {
      refresh: true, //强制刷新子组件
      // 排序
      sortCol: "",
      rule: "",
      //表格数据
      pageData: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        totalPages: 0,
        data: [],
      },
      merchantsServer: {
        name: "",
        content: "",
        price: "" ,
        type: "",
        cid: "",
        image: "",
      },
      search: "",
      dialogVisible: false, // 详情展示是否显示
      currentServer: {}, //指向当前被选中的server信息
      updateVisible: false, //更新对话框是否显示
      addVisible: false, //新增对话框是否显示

      refreshadd: true,
    };
  },

  created() {
    this.getServer();
  },

  methods: {
    // 分页方法
    handleSizeChange(size) {
      console.log("选择" + size);
      console.log(size);
      this.pageData.pageSize = size;
      this.getServer();
    },
    handleCurrentChange(page) {
      console.log("选择:" + page + "页");
      this.pageData.currentPage = page;
      this.getServer();
    },

    // 新增服务
    addServer(data) {
      console.log(data);
      this.addVisible = false;
      //发送请求
     
        let params = new URLSearchParams();

        params.append("name", data.data.name);
        params.append("content", data.data.content);
        params.append("price", data.data.price);
        params.append("type", data.data.type);
        params.append("cid", data.data.cid);
        params.append("image", data.data.image);
        http.post("http://192.168.11.18:8080/server/save", params).then((res) => {
          console.log(res);
        });
     

      // break;
    },
    // 查看详情
    handleDetail(index, row) {
      //强制刷新
      this.refresh = false;
      this.$nextTick(() => {
        this.refresh = true;
      });
      console.log(row);
      this.dialogVisible = true;
      this.currentServer = row;
      http
        .get("http://192.168.11.18:8080/server/findServerById/" + row.id)
        .then(({ data }) => {
          console.log(data);
          console.log(data.data.image);
          this.currentServer = data.data;
        });
    },
    //修改服务
    handleEdit(index, row) {
      this.refresh = false;
      this.$nextTick(() => {
        this.refresh = true;
      });
      //修改当前被选中的teacher
      this.currentServer = row;
      //显示对话框
      this.updateVisible = true;
    },
    //新增服务
    handleAdd() {
      this.addVisible = true;
      //  更新数据
      this.refresh = false;
      this.$nextTick(() => {
        this.refresh = true;
      });
    },

    //删除服务

    open(index, row) {
      this.$confirm("此操作将永久删除该服务, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let id = row.id;
          console.log("获取ID" + id);
          axios({
            url: "http://192.168.11.18:8080/server/deleteOne/" + row.id,
            method: "delete",
          }).then(({ data }) => {
            if ((data.state = "SUCCESS")) {
              this.getServer();
            }
            console.log(data);
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleDelete(index, row) {
      let id = row.id;
      console.log("获取ID" + id);
      axios({
        url: "http://192.168.11.18:8080/server/deleteOne/" + row.id,
        method: "delete",
      }).then(({ data }) => {
        if ((data.state = "SUCCESS")) {
          this.getServer();
        }
        console.log(data);
      });
    },
    getServer() {
      http({
        url:
          "http://192.168.11.18:8080/server/findByPage/" +
          this.pageData.pageSize +
          "/" +
          this.pageData.currentPage,
        method: "get",
      }).then(({ data }) => {
        console.log(data);

        let resutl = data.data;
        let array = new Array(resutl.data.length);

        for (let i = 0; i < array.length; i++) {
          if (resutl.data[i].status == 0) {
            array[i] = resutl.data[i];
          }
        }

        this.pageData.data = array;
        this.pageData.total = resutl.total;
        this.pageData.currentPage = resutl.totalPages;
        this.pageData.pageSize = resutl.pageSize;
        this.pageData.currentPage = resutl.currentPage;
      });
    },
    //点击确认更新数据方法
    updateData(data) {
      console.log(data);
      //关闭对话框
      this.updateVisible = false;
      //更新数据
      if (data.result) {
        //数据更新  将新数据展示在对应的位置
        for (let i = 0; i < this.pageData.data.length; i++) {
          let server = this.pageData.data[i];
          if (server.id == data.data.id) {
            //this.tableData[i] = data.data;  替换对象不会自动刷新
            //最好是直接属性赋值
            server.name = data.data.name;
            server.content = data.data.content;
            server.price = data.data.price;
            //发送请求修改后台数据......

            let params = new URLSearchParams();
            params.append("id", server.id);
            params.append("name", server.name);
            params.append("content", server.content);
            params.append("price", server.price);
            params.append("image", server.image);

            // axios().post("http://192.168.11.18:8080/server/updateById",params).then(({data})=>{
            //   console.log(data);
            // })
            //发送请求
            axios
              .post("http://192.168.11.18:8080/server/updateById", params)
              .then((res) => {
                console.log(res);
              });

            break;
          }
        }
      }
    },
    // 排序按钮
    priceBtnUp() {
      if (this.sortCol==1) {
        this.sortCol = "price";
 this.rule = "asc";
      http
        .get(
          "http://192.168.11.18:8080/server/sorting/" +
            this.sortCol +
            "/" +
            this.rule +
            "/" +
            this.pageData.pageSize +
            "/" +
            this.pageData.currentPage
        )
        .then(({ data }) => {
          console.log(data);
          let resutl = data.data;
          let array = new Array(resutl.data.length);

          for (let i = 0; i < array.length; i++) {
            if (resutl.data[i].status == 0) {
              array[i] = resutl.data[i];
            }
          }
          this.pageData.data = array;
          this.pageData.total = resutl.total;
          this.pageData.currentPage = resutl.totalPages;
          this.pageData.pageSize = resutl.pageSize;
          this.pageData.currentPage = resutl.currentPage;
        });
      }else{
        alert("请选择排序内容")
        
      }
      
     
    },
    priceBtnDown() {
      if (this.sortCol==1) {
         this.sortCol = "price";
           this.rule = "desc";
      http
        .get(
          "http://192.168.11.18:8080/server/sorting/" +
            this.sortCol +
            "/" +
            this.rule +
            "/" +
            this.pageData.pageSize +
            "/" +
            this.pageData.currentPage
        )
        .then(({ data }) => {
          console.log(data);
          let resutl = data.data;
          let array = new Array(resutl.data.length);

          for (let i = 0; i < array.length; i++) {
            if (resutl.data[i].status == 0) {
              array[i] = resutl.data[i];
            }
          }
          this.pageData.data = array;
          this.pageData.total = resutl.total;
          this.pageData.currentPage = resutl.totalPages;
          this.pageData.pageSize = resutl.pageSize;
          this.pageData.currentPage = resutl.currentPage;
        });
      }else{
        alert("请选择排序内容")
       
      }
     
    
    },
  },
};
</script>

<style scoped>
#add {
  /* margin: 0; */
  /* padding: 0; */
  position: relative;
  top: 2px;
  /* right: 100px;  */
  /* bottom: 5px;  */
  /* left: 100px; */
}
</style>
